<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tbl1{
            border-collapse: collapse;
            width: 300px;
            margin: 100px auto;
        }
        #tbl1, #tbl1 td{
            border: 1px solid #000;
        }

    </style>
</head>
<body>
    <table id="tbl1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>11</td>
            <td>lisi</td>
            <td>
                <button class="btn-delete" user-id="11">delete</button>
            </td>
        </tr>
        <tr>
            <td>22</td>
            <td>wangwu</td>
            <td>
                <button class="btn-delete" user-id="22">delete</button>
            </td>
        </tr>
    </table>

    <script>
        // let btns = document.getElementsByClassName('btn-delete');
        let btns = document.querySelectorAll('.btn-delete');

        for(let i = 0; i < btns.length; i++)
        {
            btns[i].onclick = function(){
                // console.log(   i   );
                // this: 永远指向当前对象
                // this.parentNode.parentNode.remove();
                // console.log(this.parentNode.previousElementSibling.previousElementSibling.innerHTML);
                // console.log(this.parentNode.parentNode.firstElementChild.innerHTML);
                console.log(this.getAttribute('user-id'));
            }
        }

        // btns.forEach(function(btn){
        //     btn.onclick = function(){
        //         console.log('haha');
        //     }
        // })
    </script>
</body>
</html>